<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar :fixed='true'>
        <template v-slot:left>
          <!-- <img class="logo" src="@/assets/toutiao_logo.png" alt="" /> -->
          <span style="color:white">千 锋 头 条</span>
        </template>
        <template v-slot:right>
          <!-- 坑: postcss只能翻译style里css样式代码, 标签内行内样式它无法转换px转rem, 所以需要自己手动计算 -->
          <van-icon name="search" size="0.48rem" color="#fff"  @click="moveSearchFn"/>
        </template>
      </van-nav-bar>
    </div>
    <!-- tab栏导航 -->
    <!-- 1. tab栏导航
      van-tabs 一行容器
      van-tab 每个tab栏
      v-model关联的激活项的下标(双向绑定)
      tab栏+内容
      2. 坑: sticky参照"父级div标签"进行粘性布局, 如果body/html设置高度, 父级div一起走了, 所以内部sticky也上去的

      3. (重要)每个van-tab代表一个标签导航, 中间夹着内容, 对应的下属列表内容
      4. (重要)每个van-tab都对应"独立的自己"的ArticleList(多次)
      5. 细节
      van-tab循环了很多标签导航, 与之一一对应的内容列表不是上来都创建的, 默认创建当前激活导航对应列表组件
      第一次切换到对应频道时, 才会创建下属的ArticleList组件->created方法
      第二次切换就是显示/隐藏切换
     -->
    <div class="main">
      <van-tabs v-model="channelId" sticky offset-top="1.226667rem" animated @change='channelChangeFn'>
        <van-tab :title="channel.name" v-for="channel in userChannelList" :key="channel.id" :name='channel.id'>
          <ArticleList :channelId="channelId"></ArticleList>
          </van-tab>

      </van-tabs>
      <!-- 编辑频道图标 -->
         <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="handlePlus"/>
    </div>
    <!-- 频道管理弹出层 -->
    <van-popup v-model="show" class="channel_PopUp" get-container="body">
      <ChannelEdit
      :userList='userChannelList'
       :unCheckList='unCheckChannelList'
       @addChannelEv='addChannelFn'
       @removeChannelEv='removeChannelFn'
       @closeEv='closeFn'
       ref="refEdit"
       v-model="channelId"
       >
      </ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelListAPI, updateChannelsAPI, removeTheChannelAPI } from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit'
// 问题1: 网页刚打开, created里请求和onLoad里请求同时发送, 请求的都是最新数据
// onLoad中, 2次一样的数据合并, 数据重复, key重复了
// 原因: van-list组件, 组件挂载时, 默认就会判定一次是否触底
// 第一页数据也是网络请求回来的, 标签先挂载了, 数据回来更新DOM, 所以标签没有高度, list的load事件上来就触发
// 解决方案1: list组件添加 :immediate-check="false" 上来初始化时不要判定
// 解决方案2: onLoad第一行, 写数组长度的判断
export default {
  name: 'Home',
  data () {
    return {
      channelId: 0,
      userChannelList: [],
      allChannelList: [],
      show: false,
      channelScrollObj: {} // 事件滚动时存储每个tap的scrollTop的位置
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },

  async created () {
    // 获取用户频道列表
    const result = await getUserChannelsAPI()
    // console.log(result.data)
    this.userChannelList = result.data.data.channels

    const result2 = await getAllChannelListAPI()
    console.log(result2)
    this.allChannelList = result2.data.data.channels
  },
  methods: {
    // async handleChange () {
    //   const result2 = await getAllArticleListAPI({
    //     channel_id: this.channelId, // 先默认请求推荐频道数据
    //     timestamp: new Date().getTime()
    //   })
    //   console.log(result2)
    //   this.articleList = result2.data.data.results
    // }
    // 加号点击方法
    // tap切换事件
    channelChangeFn () {
      // tap切换后，设置混动条位置
      // tab切换时，这个组件内部，会把切走的容器height设置为0，滚动条因为没有设置高度回到了顶部
      // 切回来的一瞬间没有高度，滚动事件从底下上来也被触发了，所以才把数据设置为0
      // 切换回来的一瞬间，高度为0，你设置滚动位置也无用
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollObj[this.channelId]
      })
    },
    handlePlus () {
      this.show = true
    },
    // 添加频道
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      // 问题: 为何只需要push, 不需要从下面数组里移除
      // 还要把最新的数组, 发送给后台
      // 数组里对象字段 -> 转换
      // 推荐频道不能传递-删除出不是推荐频道剩下的频道对象
      // const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      // newArr.forEach((obj, index) => {
      //   // delete 对象.属性 可以删除键值对
      //   delete obj.name
      //   obj.seq = index
      // })
      // const res = await updateChannelsAPI({
      //   channels: newArr
      // })
      // console.log(res)
      // 上面的代码出问题, 新增时, 名字被删除了
      // 原因: 所有数组里的对象, 都是同一个内存地址, 影响到ChannelEdit.vue中对象
      // 解决方法
      const newArr = this.userChannelList.filter((obj) => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj } // 拷贝(浅拷贝)
        delete newObj.name
        newObj.seq = index

        return newObj // 让map方法把新对象收集起来形成一个新数组
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      if (channelObj.id === 0) { // 编辑时候不能删除推荐频道
        return
      }
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.userChannelList.splice(index, 1)

      // 第一种方式: 把现在用户数组的数据, 再覆盖式的发给后台
      // 需要把上面的更新数组过程, 封装一个函数, add和remove里调用(笔记里)
      // 第二种方式: 只调用删除的接口
      await removeTheChannelAPI({
        channelId: channelObj.id
      })
      // console.log(res)
      // 知道: 删除接口返回状态码204(Not Content) 无返回内容
      // 知道: 删除接口返回状态码204(Not Content) 无返回内容
    },
    // 关闭弹出频道层
    closeFn () {
      this.show = false
      this.$refs.refEdit.isEdit = false // 改变编辑状态第二种方法
    },
    // 首页放大镜，跳装路由
    moveSearchFn () {
      this.$router.push('/search')
    },
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop
      this.channelScrollObj[this.channelId] = document.documentElement.scrollTop // 动态存距离顶部位置距离
      // console.log(this.channelScrollObj)
    }
  },
  computed: {
    unCheckChannelList () {
      // 目标: 把所有频道数组挨个对象取出, 去用户已选频道数组里查找, 如果找不到, 则让filter方法收集到一个新数组里
      const newArr = this.allChannelList.filter(bigObj => {
        const index = this.userChannelList.findIndex(smallObj => {
          return smallObj.id === bigObj.id
        })

        // 如果找到了
        if (index > -1) {
          return false // 找到相同的不要
        } else {
          return true
        }
      })
      return newArr
    }
  },
  activated () {
    window.addEventListener('scroll', this.scrollFn)
    document.documentElement.scrollTop = this.$route.meta.scrollT
    // window和document，监听网页滚动事件
    // html便签获取scollTop，滚动的距离和设置滚动的位置
    // console.log(this.$route.meta)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollFn)
  }

}
</script>

<style lang='less'>
.logo {
  width: 100px;
  height: 30px;
}
.main{
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/.van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
//弹出层样式
.channel_PopUp{
  width: 100vw;
  height: 100vh;
  //如果想给100%，要先给html，body设置100%
  //vw和vh是css3新出的单位，参考浏览器的百分比
}
</style>
